<template>
	<view>
		<view class="title-box">
			<view class="title-box-txt">
				介绍自己
			</view>
			<view class="title-box-tip">
				*请录个简单的视频介绍自己，证明自己的创作才能
			</view>
		</view>
		<view class="up-box">
			<image src="/static/image/mine/up.png" mode=""></image>
			<view>立即上传你的介绍视频</view>
		</view>
		<view class="title-box" style="margin-top: 20rpx;">
			<view class="title-box-txt">
				认证类型
			</view>
			<view class="title-box-tip">
				*如果没有你要认证的类型，请选择实力创作者
			</view>
		</view>
		<view class="list-box">
			<view class="list-box-item" :class="currentOne == index ? 'active' : ''" v-for="(item,index) in list1"
				:key="index" @click="changeOne(index)">
				{{item}}
			</view>
		</view>
		<view class="title-box" style="margin-top: 20rpx;">
			<view class="title-box-txt">
				微信（选填）
			</view>
			<view class="title-box-tip">
				*与平台客服取得联系，随时沟通并获得更多福利
			</view>
		</view>
		<input class="title-input" type="text" placeholder="请输入您的微信号"/>
		<view class="title-box" style="margin-top: 20rpx;">
			<view class="title-box-txt">
				其他平台的认可截图（选填）
			</view>
			<view class="title-box-tip">
				*请提供抖音、快手或微博等其他平台主页截图，以便我们更好了
				解您的创作才能，其他平台内容质量高更容易通过认证哦~
			</view>
		</view>
		<view class="up-imgs">
			<image src="/static/image/find/upload.png" mode=""></image>
			<view class="">
				上传图片
			</view>
		</view>
		<view class="submit-btn" @click="submits">
			提交认证
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentOne: 0,
				list1: ['文娱推荐', '音乐演出', '看荐电影', '书卷一梦', '樱桃琥珀', '昭雪录'],
			}
		},
		methods: {
			// 认证类型
			changeOne(e) {
				this.currentOne = e;
			},
			// 提交
			submits(){
				this.$helper.to('/pages/views/shStatus/shStatus')
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
		padding: 30rpx;
		padding-bottom:200rpx;
	}

	.title-box {
		margin-bottom: 20rpx;

		.title-box-txt {
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
		}

		.title-box-tip {
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			margin-top: 10rpx;
		}
	}

	.up-box {
		width: 582rpx;
		height: 352rpx;
		background: #F8F8F8;
		border-radius: 16rpx;
		margin: 0 auto;
		text-align: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;

		image {
			width: 140rpx;
			height: 140rpx;
			margin: 0 auto;
			margin-top: 100rpx;
			margin-bottom: 10rpx;
		}
	}

	.list-box {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;

		.list-box-item {
			width: 210rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			border: 1px solid #CCCCCC;
			text-align: center;
			line-height: 72rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			margin: 20rpx 20rpx 0 0;
		}

		.active {
			background: #000000;
			color: #fff;
		}
	}
	.title-input{
		width: 690rpx;
		height: 90rpx;
		border-radius: 12rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #000;
		line-height: 90rpx;
		margin: 0 auto;
		background: #F8F8F8;
		padding-left: 12rpx;
	}
	.up-imgs{
		width: 219rpx;
		height: 219rpx;
		border-radius: 16rpx;
		border: 1rpx solid #CCCCCC;
		text-align: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		image{
			width: 68rpx;
			height: 68rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			margin-bottom: 10rpx;
		}
	}
	.submit-btn{
		width: 690rpx;
		height: 90rpx;
		position: fixed;
		bottom: 50rpx;
		background-color: #000000;
		text-align: center;
		line-height: 90rpx;
		left: 50%;
		transform: translate(-50%);
		color: #FEC92F;
		border-radius: 50rpx;
	}
</style>